<template>
    <div class="learning-scrollSnap">
      <!--        <h1>{{ router. }}</h1>-->
      <h3>设置父元素 <code>scroll-snap-type</code> 属性查看效果</h3>
      <codeContainer :options="options">
        <template #default="{active}">
          <div class="scrollSnap-container" :style="stringToObject(active)">
            <div class="item" v-for="(color, i) in colors"
                 :key="color" :style="{backgroundColor: color}">
              {{ i + 1 }}
            </div>
          </div>
        </template>
        <template #code>
            <pre data-type="css">
              {{ codeFragment["scrollSnap-1"] }}
            </pre>
        </template>
      </codeContainer>
      <h3>设置子元素的 <code>scroll-snap-align</code> 属性查看效果</h3>
      <codeContainer :options="optionsAlign">
        <template #default="{active}">
          <div class="scrollSnap-container vertical">
            <div class="item" v-for="(color, i) in colors"
                 :key="color" :style="{...stringToObject(active),backgroundColor: color}">
              {{ i + 1 }}
            </div>
          </div>
        </template>
        <template #code>
            <pre data-type="css">
              {{ codeFragment["scrollSnap-2"] }}
            </pre>
        </template>
      </codeContainer>
    </div>
</template>

<script setup>
import { stringToObject } from '@/assets/js/utils';
import { ref } from 'vue';
import CodeContainer from '@/components/codeContainer/codeContainer.vue';
import codeFragment from '@/assets/js/codeFragment';

const colors = ref([ '#DB6A7E', '#95C4A0', '#967063', '#8FA5BA', '#9789A2', '#b3b6a1' ]);
const options = ref([
  { name: 'scroll-snap-type: none;' },
  { name: 'scroll-snap-type: x mandatory;' },
  { name: 'scroll-snap-type: x proximity;' }
]);
const optionsAlign = ref([
  { name: 'scroll-snap-align: start;' },
  { name: 'scroll-snap-align: center;' },
  { name: 'scroll-snap-align: end;' }
]);

</script>

<style scoped lang="scss">
.learning-scrollSnap {
  .scrollSnap-container {
    width: 100%;
    height: 300px;
    display: flex;
    overflow-x: auto;
    // x轴 强制吸附
    scroll-snap-type: x mandatory;

    &::-webkit-scrollbar {
      width: 0;
      height: 6px;
    }

    .item {
      width: 100%;
      height: 100%;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      background-color: #dcdfe6;
      // 对齐位置
      scroll-snap-align: start;
      // 吸附停止 永远停在下一个元素上
      scroll-snap-stop: always;
    }

    &.vertical {
      flex-direction: column;
      // x轴 强制吸附
      scroll-snap-type: y mandatory;

      .item {
        height: 80%;
      }
    }
  }
}
</style>
